


Repository: Twitter

by gadaursan



Series: Repository: A Collection of Work Skins and Guides [2]
Category: Original Work
Genre: CSS, Fanwork Research & Reference Guides, HTML, Work Skins
Language: English
Status: Completed
Published: 2020-02-07
Updated: 2020-03-18
Packaged: 2021-02-22 13:50:22
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 8
Words: 7,489
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/22517134
Author URL: https://archiveofourown.org/users/gadaursan/pseuds/gadaursan
Summary: A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:- Quote Retweets- Embedded Images- Twitter Polls
Series: Repository: A Collection of Work Skins and Guides [2]
Series URL: https://archiveofourown.org/series/1623022
Comments: 27
Kudos: 95
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works





	1. An Introduction

**Author's Note:**

  * For [genderneutralnoun](https://archiveofourown.org/users/genderneutralnoun/gifts).



> This work contains a work skin. Please enable "Show Creator's Style" for best results.

"I just wonder, how possible would it be to emulate polls? I can think of at least one twitter fic in which the choices the audience made (and the percentages of how many people voted for what) contributed to the narrative, and many RPers do polls for stuff. Then again I'm mostly thinking from the "converting twitter stuff to live forever on the Archive" point of view, and I'm not sure if that's what you originally intended."

\- [genderneutralnoun](https://archiveofourown.org/works/8631214/comments/278084290), comment from Repository, Chapter 4

The other day, a commenter asked me if it was possible to emulate polls, and I got to work trying to answer that question and made this.

Lee Jordan✔  
@leejordan

Who won the House Cup in 1991? #Hogwarts #HHC #HouseCup

27%Slytherin

25%Hufflepuff

28%Griffindor

20%Ravenclaw

14 votes • Final results  
❤ 2 6:06 AM • Feb 17, 2016

192 people are talking about this

Then I got worried about cluttering my work skin from my other guide "Repository" and dealing with my old code was a real nightmare, so I decided to make a proper guide to properly overhaul the Twitter work skin to a more streamlined, modular design with more capabilities. Components like headers, polls, pictures, quote retweets are designed to be easily removed and put into the tweet.

Much like "Repository," this guide aims to use as much pure CSS and HTML as possible so users won't have to rely too much on outside sites to render icons and whatnot. I hope this work skin and the documentation I've written for it will be easy to understand.

**The "No Coding Required" Way**

If you're not ready to dive into code of any kind, I've put together a tool I call the [Tweet Skin Builder](https://archiveofourown.org/works/22517134/chapters/55486993) to make tweets much easier. Not only does this tool let you create your tweets without worrying about code, it also lets you preview what your tweet will look like as you enter it. The Tweet Skin Builder should be functioning on both mobile and desktop and is open for contributions.

Anyways, moving on.

**What You Need**

Although I'll be going through the code piece by piece, this guide is meant for beginner coders who have some understanding of HTML and CSS. I don't expect you all to be computer wizards starting out, but knowing how to read HTML is a very powerful skill to have. If you are really brand new to coding, please familiarize yourself with the basics on sites like [ W3 Schools](https://www.w3schools.com/).

You should also be comfortable with setting up your own workskin, but if you need to learn that, [ AO3 has documentation on how to do this](https://archiveofourown.org/admin_posts/1370).

And since we're getting our hands dirty with code, get yourself a proper IDE to work in. And don't go trying to edit HTML on your phone. Better to be safe than sorry. I personally recommend Atom for something cross platform, clean, and lightweight, but any IDE that supports HTML and CSS will do. Feel free to leave comments below on recommendations, if you have any.

**Understanding this Guide**

Snippets of code will be written in a different font (namely Courier). The specific parts where the user should pay attention to, whether it's for customization or a class combination, will be bolded in red as follows

<div> Hello my name is <span> Cloud </span>!</div>

You will not need to copy paste anything in CSS (stuff with braces), but you should try to copy paste with the HTML snippets scattered about. This way you will learn how to pick and choose which components you need.

For quick reference, the HTML templates and complete CSS code dump will be placed at the end of this work complete with a changelog in case anything has been changed.

**Need Help or Permission?**

Users are free to modify the code to however they like, no need to personally ask me, but a credit or two can go a long way.

As for users who are having trouble with their code, you can either leave a comment here, or message me through any of [my listed social media accounts on my profile](https://archiveofourown.org/users/gadaursan/profile). Please be as detailed as possible about your issue, so sharing code like a Github Gist or a Codepen link would be much appreciated.

**Changelog**

  * 02/10/2020 - Changed opacity attribute to decimals for Safari and Firefox functionality.
  * 02/18/2020 - Changed poll options background color to use opacity for dark mode site skins.
  * 03/05/2020 - Refactored 'tw19VerifiedEmbed' to 'twVerifiedEmbed'.
  * 03/18/2020 - Launched the "coding-free" Tweet Skin Builder
  * 01/11/2021 - Due to Ao3's new image fix, embedded images no longer can bleed into the sides of the container. A quick fix has been made to prevent weird whitespace.




	2. Tutorial: A Simple Tweet

In this chapter, we will make a very simple Tweet, as shown here.

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 1.2M 6:06 PM • August 12, 2017

32.2K people are talking about this

**The Wrapper**

We begin by creating a `div` container to wrap everything up in a nice bow. We also want to start decorating this div with the `tw` and `twBody` class in CSS.

.tw {  
max-width: 400px;  
margin-left: auto;  
margin-right: auto;  
padding: 1em;  
}

.tw p {  
margin: 0;  
padding: 0;  
}

.twBody {  
border: .05em solid #ddd;  
border-radius: .3em;  
}

We set the container to not exceed 400px in width, center it horizontally, and make sure the margins and padding are correct. AO3 has a habit of stuffing paragraphs and line breaks depending on how you paste HTML into the editor. We can mitigate this by making sure the blank paragraphs take up no space in our tweet. We also add a small border for our container.

We do the following in HTML. Note how we've combined the `tw` and `twBody` classes.

<div class="tw twBody">  
</div>

Now we can start adding compenents inside our Tweet.

**The Header**

Next, we want to make our header which will contain the user's profile picture, their name, and their handle.

First is the Twitter user's name and handle. We use the classes `twUser` to make a shell for the username and `twHandle` to make this part a lighter color. Why, you ask, do we change the opacity of the text instead of just choosing a grey? All will be revealed later.

.twUser {  
font-weight: bold;  
font-size: larger;  
margin-bottom: -0.1em;  
}

.twHandle {  
position: relative;  
top: -0.5em;  
font-weight: normal;  
font-size: smaller;  
opacity: 0.6;  
}

Here's the HTML. Note that there are comments embedded in the HTML, but don't remove those. AO3 will see these empty spaces and feel obligated to stuff paragraphs and line breaks in between, breaking the code. Ideally, we wouldn't need these comments, but we want the code to be readable by humans.

Euphy  
@officialeuphemia

<div class="twUser"><!---  
\---><span>Euphy<br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span></div>

Next is the profile picture. This is one of the few parts of the work skin that requires external images. We will make a class for the profile called `twAvatar`.

.twAvatar {  
width: 40px;  
height: auto;  
float: left;  
margin-right: 0.3em;  
border-radius: 20px;  
}

This class will format the picture into a circle with a border, make it hug the side of its containing element. I recommend using pictures that are square and around 60px in case readers aren't using the skins.

|   
  
---|---  
  
An unformatted image  
(60px x 60px)

| 

The same image classed  
as twAvatar  
  
<img class="twAvatar" src="IMAGE URL HERE" />

We also need to make a class for a verified account icon. We call this class `twVerified`, which just makes a blue `span` container with a white check mark inside.

.twVerified {  
position: relative;  
bottom: 2px;  
display: inline-block;  
font-weight: normal;  
text-align: center;  
font-size: 10px;  
width: 15px;  
height: 15px;  
margin-left: 0.3em;  
background-color: #1DA1F2;  
color: #fff;  
border-radius: 50%;  
}

Now it looks like this in HTML.

✔

<span class="twVerified">✔</span>

It doesn't resemble the original, but it should do the job. This is an optional feature, and you can remove it from later code if you like.

We can combine the three parts and insert them into our div container.

Euphy✔  
@officialeuphemia

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span><!---  
\---></div>  
</div>

So far, so good?

**The Main Text**

The work skin is designed to make the user experience easy to use. By enclosing a div with the class `twText`, all selectors associated with the class will apply.

.twText span {color: #1DA1F2}

To enable hashtag colors, enclose hashtags in a span class, and the work skin will automatically color them blue, no added classes needed. This is what it will look like:

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>

We can add this to the bottom of the tweet after the header.

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
</div>

Now this looks more like a Tweet, and you can honestly call it a day here, but we still have a few more parts to make it look a bit more authentic.

**The Statistics**

We have the class `twStats` for the `div` containing the likes and timestamp. We need a bit of extra formatting on the timestamp so it is reasonably spaced away from the likes.

.twStats {  
width: 100%;  
opacity: 0.6;  
}

.twTime {  
padding: 0em 0em 0em 0.6em;  
}

All it does is change the opacity of the text so it's lighter colored.

❤ 4.6M 6:06 PM • August 12, 2017

<div class="twStats"><!---  
\--->❤ 4.6M<span class="twTime"> 6:06 PM • August 12, 2017</span></div>

We put this in our Tweet as follows.

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 1.2M 6:06 PM • August 12, 2017

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
<div class="twStats"><!---  
\--->❤ 1.2M<span class="twTime"> 6:06 PM • August 12, 2017</span></div>  
</div>

**The Reply Count**

In the embedded Tweet, replies counted at the bottom of the container, and we will use the `twComments` class.

.twComments {  
width: 100%;  
font-weight: 300;  
padding-top: 0.5em;  
margin-top: 0.5em;  
border-top: .05em solid #ddd;  
}

This changes the opacity of the text and makes a border on the top.

32.2K people are talking about this

<div class="twComments ">32.2K people are talking about this</div>

We put this at the end of our main container as the finishing touch.

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 1.2M 6:06 PM • August 12, 2017

32.2K people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
<div class="twStats"><!---  
\--->❤ 1.2M<span class="twTime"> 6:06 PM • August 12, 2017</span></div>  
<div class="twComments ">32.2K people are talking about this</div>  
</div>

And now we have reached the end of this tutorial with a complete Tweet. In the next chapter, we will learn how to integrate other kinds of content in our Tweet.


	3. Pictures, Reply Tags, Quote Retweets

In this chapter, we will make a Tweet things like pictures, single replies, and quote retweets.

**Tweet Replies**

While this skin still doesn't allow for creating Tweet threads, you can indicate if a tweet has been made in reply to another tweet. We use the class `twReply` to style the div containing that reply. This message should only contain two parts: the phrase "replying to" and the handle of the account being replied to.

.twReply span:first-child {  
opacity: 0.6;  
}

.twReply span:last-child {  
color: #1DA1F2;  
}

The first span will always be the "replying to" phrase and is colored as such. The last span in this `div` will be colored like a link.

replying to  @officialeuphemia

<div class="twReply"><span>replying to </span><span>@officialeuphemia</span></div>

You can put this `div` in between the header and the text.

ASHFOOOOORD  
@greengablez

replying to  @officialeuphemia

omg she's participating in #hotboysummer with the rest of us!

❤ 5 6:10 PM • August 12, 2017

2 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>ASHFOOOOORD<br/><!---  
\---><span class="twHandle">@greengablez</span></span><!---  
\---></div>  
<div class="twReply"><span>replying to </span><span>@officialeuphemia</span></div>  
<div class="twText">omg she's participating in <span>#hotboysummer</span> with the rest of us!</div>  
<div class="twStats"><!---  
\--->❤ 5<span class="twTime"> 6:10 PM • August 12, 2017</span></div>  
<div class="twComments ">2 people are talking about this</div>  
</div>

Easy peasy lemon squeezy.

**Tweets with Pictures**

Attaching a single image to your Tweet needs the class `twImage`.

.twImage{  
width: 100%;  
height: auto;  
border-radius: 0.3em;  
margin: 0.5em 0em 0.5em 0em;  
}

This will make sure the image is positioned to fit the full length of the tweet with rounded edges. Unlike Twitter, this won't clip the picture considerably.

Euphy✔  
@officialeuphemia

Having a nice day out at #LakeKawaguchiHotel with some friends! I really really recommend the food here! It's to die for!

❤ 1.8M 8:25 AM • August 22, 2017

135.7K people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span></div>  
<div class="twText">Having a nice day out at <span>#LakeKawaguchiHotel</span> with some friends! I really really recommend the food here! It's to die for!</div>  
<img class="twImage" src="IMAGE URL HERE">  
<div class="twStats"><!---  
\--->❤ 1.8M<span class="twTime"> 8:25 AM • August 22, 2017</span></div>  
<div class="twComments ">135.7K people are talking about this</div>  
</div>

**Quote Retweets**

ASHFOOOOORD  
@greengablez

i can't believe we're watching a fairy tale play out for real... man wish that were me

Euphy✔@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 45 6:20 PM • August 12, 2017

35 people are talking about this

Quote retweets can be a little complex at first, but the work skin has been designed to be simple and resuse as many classes as possible. There still are some new classes to work with. For the outer shell of the quoted tweet, we use the new class `twEmbed`.

.twEmbed {  
min-width: 90%;  
position: relative;  
padding: 0.5em;  
margin-top: 0.5em;  
margin-bottom: 0.5em;  
overflow: hidden;  
}

By combining the classes `twBody` and `twEmbed`, we make a proper shell for our embedded tweet.

ASHFOOOOORD  
@greengablez

i can't believe we're watching a fairy tale play out for real... man wish that were me

❤ 45 6:20 PM • August 12, 2017

35 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>ASHFOOOOORD<br/><!---  
\---><span class="twHandle">@greengablez</span></span></div>  
<div class="twText">i can't believe we're watching a fairy tale play out for real... man wish that were me</div>  
<div class="twBody twEmbed"></div>  
<div class="twStats"><!---  
\--->❤ 45<span class="twTime"> 6:20 PM • August 12, 2017</span></div>  
<div class="twComments ">35 people are talking about this</div>  
</div>

Most of the new classes are only for formatting the embedded header, so all these classes have "embed" at the end of it.

.twAvatarEmbed {  
width: 20px;  
height: auto;  
float: left;  
margin: 0em 0.3em .3em 0em;  
border-radius: 20px;  
}

.twUserEmbed {  
font-weight: bold;  
font-size: normal;  
margin-bottom: 0.5em;  
}

.twHandleEmbed {  
position: relative;  
font-weight: normal;  
opacity: 0.6;  
margin-left: 0.3em;  
}

.twVerifiedEmbed {  
position: relative;  
bottom: 2px;  
display: inline-block;  
font-weight: normal;  
text-align: center;  
font-size: 9px;  
width: 12px;  
height: 12px;  
margin-left: 0.3em;  
background-color: #1DA1F2;  
color: #fff;  
border-radius: 50%;  
}

Together, this makes the header of the quoted retweet as follows.

Euphy✔@officialeuphemia

<div class="twUserEmbed"><!---  
\---><img class="twAvatarEmbed" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerifiedEmbed">✔</span><!---  
\---><span class="twHandleEmbed">@officialeuphemia</span></span><!---  
\---></div>

We insert this in the quoted retweet shell we made earlier. We use the same `twText` class for the div to make our quoted text, by the way.

ASHFOOOOORD  
@greengablez

i can't believe we're watching a fairy tale play out for real... man wish that were me

Euphy✔@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 45 6:20 PM • August 12, 2017

35 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>ASHFOOOOORD<br/><!---  
\---><span class="twHandle">@greengablez</span></span></div>  
<div class="twText">i can't believe we're watching a fairy tale play out for real... man wish that were me</div>  
<div class="twBody twEmbed">  
<div class="twUserEmbed"><!---  
\---><img class="twAvatarEmbed" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerifiedEmbed">✔</span><!---  
\---><span class="twHandleEmbed">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
</div>  
<div class="twStats"><!---  
\--->❤ 45<span class="twTime"> 6:20 PM • August 12, 2017</span></div>  
<div class="twComments ">35 people are talking about this</div>  
</div>

To add pictures to your quoted retweet, use the `twImageEmbed`.

.twImageEmbed{  
width: 110%;  
height: auto;  
margin: 0.5em 0em -1em -1em;  
}

Compared to `twImage`, this new class will make sure the image overflows into the shell's sides. so some cropping in the borders can occur.

shirley's on vacay  
@greengablez

i'm like sitting across from you lmao but that looks so good euphy!!

Euphy✔@officialeuphemia

Having a nice day out at #LakeKawaguchiHotel with some friends! I really really recommend the food here! It's to die for!

  


❤ 1.1K 8:25 PM • August 22, 2017

14.2K people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL HERE"><!---  
\---><span>shirley's on vacay<br/><!---  
\---><span class="twHandle">@greengablez</span></span></div>  
<div class="twText">i'm like sitting across from you lmao but that looks so good euphy!!</div>  
<div class="twBody twEmbed">  
<div class="twUserEmbed"><!---  
\---><img class="twAvatarEmbed" src="IMAGE URL HERE"><!---  
\---><span>Euphy<span class="twVerifiedEmbed">✔</span><!---  
\---><span class="twHandleEmbed">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">Having a nice day out at <span>#LakeKawaguchiHotel</span> with some friends! I really really recommend the food here! It's to die for!</div>  
<img class="twImageEmbed" src="IMAGE URL HERE">  
</div>  
<div class="twStats"><!---  
\--->❤ 4.8M<span class="twTime"> 6:20 PM • August 12, 2017</span></div>  
<div class="twComments ">192 people are talking about this</div>  
</div>

And this concludes the tutorial for specific add ons. Next chapter we'll be learning how to write poll results.


	4. Polls on Twitter

In this tutorial, we will learn how to emulate Twitter polls. This can be useful if your fic has a narrative about polls or if you're just trying to archive the poll results for interactive Twitter fics.

We will be using data from [@polls by Buzzfeed.](https://twitter.com/polls)

**Active Polling**

polls✔  
@polls

Would you rather let your boss see your browsing history, or let your parents see your browsing history?

Boss

Parents

742 votes • 4 hours left  
❤ 65 7:14 PM • Aug 15, 2018

1 person is talking about this

First we will cover how to show an active poll, meaning the results aren't in or the user hasn't voted yet. We will use the class `twAPoll` to accomplish this look.

.twAPoll {  
padding: .3em 0em .3em 0em;  
margin: .5em 0em .5em 0em;  
border: 0.08em solid #1DA1F2;  
border-radius: 1em;  
color: #1DA1F2;  
text-align: center;  
}

This class will do all the formatting for you. All you have to do is change the text to whatever you want.

Something you can choose.

<div class="twAPoll">Something you can choose.</div>

You stack these in your Tweet, just like the elements in previous tutorials. No hassle.

polls✔  
@polls

Would you rather let your boss see your browsing history, or let your parents see your browsing history?

Boss

Parents

❤ 65 7:14 PM • Aug 15, 2018

1 person is talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL" width="60px"><!---  
\---><span>polls<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@polls</span></span></div>  
<div class="twText">Would you rather let your boss see your browsing history, or let your parents see your browsing history?</div>  
<div class="twAPoll">Boss</div>  
<div class="twAPoll">Parents</div>  
<div class="twStats"><!---  
\--->❤ 65<span class="twTime"> 7:14 PM • Aug 15, 2018</span></div>  
<div class="twComments ">1 person is talking about this</div>  
</div>

To add things like how many people already voted and how much time is left, you add a line into the `twStats` class. Remember not to delete those comments, or you'll be cursed by AO3's auto breaks.

polls✔  
@polls

Would you rather let your boss see your browsing history, or let your parents see your browsing history?

Boss

Parents

742 votes • 4 hours left  
❤ 65 7:14 PM • Aug 15, 2018

1 person is talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL" width="60px"><!---  
\---><span>polls<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@polls</span></span></div>  
<div class="twText">Would you rather let your boss see your browsing history, or let your parents see your browsing history?</div>  
<div class="twAPoll">Boss</div>  
<div class="twAPoll">Parents</div>  
<div class="twStats"><!---  
\--->742 votes • 4 hours left<br/><!---  
\--->❤ 65<span class="twTime"> 7:14 PM • Aug 15, 2018</span></div>  
<div class="twComments ">1 person is talking about this</div>  
</div>

**Polling Results**

Now what if we want to show the results of our poll? This is what the class `twPoll` is for.

.twPoll {  
padding: .3em 0em .3em 0em;  
margin: .5em 0em .5em 0em;  
border-radius: .3em;  
white-space: nowrap;  
}

.twPoll p{  
margin: 0;  
padding: 0;  
}

We also have a series of classes for the percentages of the votes denoted as `pN` where `N` is the percentage. Here is a sample `pN` class for 25% and 75%.

.p25 {width: 25%}

.p75 {width: 75%}

I won't list all the possible classes, but it should be ranged from `p0` and `p100`, whole numbers only. Sorry decimals, but please round accordingly.

The classes `twWin` and `twOpt` will give the options their colors, the former for the winner and the latter for everyone else.

.twWin {background-color: #74CBFB} /* Winning option color */

.twOpt {background-color: #e1e8ed} /* Other options color */

Now if you combine the three kinds of classes together, you can make a proper bar for your chart. There's also a class to bold and pad out the percentage text, but that should be easy to understand.

75%Winner

<div class="twPoll twWin p75"><span class="twBold">75%</span>Winner</div>

25%Not a Winner

<div class="twPoll twOpt p25"><span class="twBold">25%</span>Not a Winner</div>

These bars can be stacked independently within the Tweet, just like the active poll bars.

polls✔  
@polls

What is the best kind of pie?

52%Apple

14.2%Banana Cream

9.4%Meat

24.4%Pumpkin

5484 votes • Final results  
❤ 65 7:14 PM • Aug 15, 2018

20 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL" width="60px"><!---  
\---><span>polls<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@polls</span></span></div>  
<div class="twText">What is the best kind of pie?</div>  
<div class="twPoll twWin p52"><span class="twBold">52%</span>Apple</div>  
<div class="twPoll twOpt p14"><span class="twBold">14.2%</span>Banana Cream</div>  
<div class="twPoll twOpt p9"><span class="twBold">9.4%</span>Meat</div>  
<div class="twPoll twOpt p24"><span class="twBold">24.4%</span>Pumpkin</div>  
<div class="twStats"><!---  
\--->5484 votes • Final results<br/><!---  
\--->❤ 65<span class="twTime"> 7:14 PM • Aug 15, 2018</span></div>  
<div class="twComments ">20 people are talking about this</div>  
</div>

Beautiful, isn't it?

**Simplified Polling**

In the case where you only want the poll, you don't need to include the header or the additional stats.

Which show that ended in 2015 will you miss the most? #BestOf2015

54%Parks and Rec

10.4%Mad Men

9%Parenthood

26.6%Glee

14,930 votes • Final results

<div class="tw twBody">  
<div class="twText">Which show that ended in 2015 will you miss the most? <span>#BestOf2015</span></div>  
<div class="twPoll twWin p54"><span class="twBold">54%</span>Parks and Rec</div>  
<div class="twPoll twOpt p10"><span class="twBold">10.4%</span>Mad Men</div>  
<div class="twPoll twOpt p9"><span class="twBold">9%</span>Parenthood</div>  
<div class="twPoll twOpt p26"><span class="twBold">26.6%</span>Glee</div>  
<div class="twStats">14,930 votes • Final results</div>  
</div>

If that's not simple enough, you can also remove the border so the poll is seamlessly integrated into the fic. Just remove `twBody` from the first div.

Which show that ended in 2015 will you miss the most? #BestOf2015

54%Parks and Rec

10.4%Mad Men

9%Parenthood

26.6%Glee

14,930 votes • Final results

<div class="tw">  
<div class="twText">Which show that ended in 2015 will you miss the most? <span>#BestOf2015</span></div>  
<div class="twPoll twWin p54"><span class="twBold">54%</span>Parks and Rec</div>  
<div class="twPoll twOpt p10"><span class="twBold">10.4%</span>Mad Men</div>  
<div class="twPoll twOpt p9"><span class="twBold">9%</span>Parenthood</div>  
<div class="twPoll twOpt p26"><span class="twBold">26.6%</span>Glee</div>  
<div class="twStats">14,930 votes • Final results</div>  
</div>

You can also remove twBody to remove the border for regular Tweets, too, in case you want that seamless look, too.

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 1.2M 6:06 PM - August 12, 2017

32.2K people are talking about this

And this completes the tutorial for polls. Next, we'll explore how Night Mode works.


	5. Night Mode

In this tutorial, we will learn how to use Night Mode. It's actually really really simple. You just add the class `twNM` on the outer shell, and the CSS does all the work for you.

Let's do a comparison. First is the Tweet in Day Mode.

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 4.6M 6:06 PM - August 12, 2017

1.2M people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>Euphy<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
<div class="twStats"><!---  
\--->❤ 4.6M<span class="twTime"> 6:06 PM - August 12, 2017</span></div>  
<div class="twComments ">1.2M people are talking about this</div>  
</div>

Now we add the class `twNM` for Night Mode.

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 4.6M 6:06 PM - August 12, 2017

1.2M people are talking about this

<div class="tw twNM twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>Euphy<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
<div class="twStats"><!---  
\--->❤ 4.6M<span class="twTime"> 6:06 PM - August 12, 2017</span></div>  
<div class="twComments ">1.2M people are talking about this</div>  
</div>

Notice how the text colors have been automatically changed so long as the class `twNM` is applied on the outermost part. The reason we changed the opacity of the text instead of grey is to allow the colors to be inverted cleanly.

So, you will not need to add `twNM` to the container of the quoted tweet. Let's observe the comparison first with Day Mode.

ASHFOOOOORD✔  
@greengablez

i can't believe we're watching a fairy tale play out for real... man wish that were me

Euphy✔@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 4.8M 6:20 PM - August 12, 2017

192 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>ASHFOOOOORD<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@greengablez</span></span></div>  
<div class="twText">i can't believe we're watching a fairy tale play out for real... man wish that were me</div>  
<div class="twBody twEmbed">  
<div class="twUserEmbed"><!---  
\---><img class="twAvatarEmbed" src="https://images2.imgbox.com/68/f6/3IaTRbkQ_o.png"><!---  
\---><span>Euphy<span class="twVerifiedEmbed">✔</span><!---  
\---><span class="twHandleEmbed">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
</div>  
<div class="twStats"><!---  
\--->❤ 4.8M<span class="twTime"> 6:20 PM - August 12, 2017</span></div>  
<div class="twComments ">192 people are talking about this</div>  
</div>

Now with Night Mode.

ASHFOOOOORD✔  
@greengablez

i can't believe we're watching a fairy tale play out for real... man wish that were me

Euphy✔@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 4.8M 6:20 PM - August 12, 2017

192 people are talking about this

<div class="tw twNM twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>ASHFOOOOORD<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@greengablez</span></span></div>  
<div class="twText">i can't believe we're watching a fairy tale play out for real... man wish that were me</div>  
<div class="twBody twEmbed">  
<div class="twUserEmbed"><!---  
\---><img class="twAvatarEmbed" src="IMAGE URL"><!---  
\---><span>Euphy<span class="twVerifiedEmbed">✔</span><!---  
\---><span class="twHandleEmbed">@officialeuphemia</span></span><!---  
\---></div>  
<div class="twText">met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></div>  
</div>  
<div class="twStats"><!---  
\--->❤ 4.8M<span class="twTime"> 6:20 PM - August 12, 2017</span></div>  
<div class="twComments ">192 people are talking about this</div>  
</div>

The same applies for polls. Here is the polling Tweet in Day Mode.

Lee Jordan✔  
@leejordan

Who won the House Cup in 1991? #Hogwarts #HHC #HouseCup

27%Slytherin

25%Hufflepuff

28%Griffindor

20%Ravenclaw

14 votes • Final results  
❤ 2 6:06 AM - Feb 17, 2016

192 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>Lee Jordan<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@leejordan</span></span></div>  
<div class="twText">Who won the House Cup in 1991? <span>#Hogwarts #HHC #HouseCup</span></div>  
<div class="twPoll twOpt p27"><span class="twBold">27%</span>Slytherin</div>  
<div class="twPoll twOpt p25"><span class="twBold">25%</span>Hufflepuff</div>  
<div class="twPoll twWin p28"><span class="twBold">28%</span>Griffindor</div>  
<div class="twPoll twOpt p20"><span class="twBold">20%</span>Ravenclaw</div>  
<div class="twStats"><!---  
\--->14 votes • Final results<br/><!---  
\--->❤ 2<span class="twTime"> 6:06 AM - Feb 17, 2016</span></div>  
<div class="twComments ">192 people are talking about this</div>  
</div>

Now for Night Mode. While the winning color will stay the same, the other options are actually a tad darker than the day mode color. The CSS will automatically deal with this.

Lee Jordan✔  
@leejordan

Who won the House Cup in 1991? #Hogwarts #HHC #HouseCup

27%Slytherin

25%Hufflepuff

28%Griffindor

20%Ravenclaw

14 votes • Final results  
❤ 2 6:06 AM - Feb 17, 2016

192 people are talking about this

<div class="tw twNM twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>Lee Jordan<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">@leejordan</span></span></div>  
<div class="twText">Who won the House Cup in 1991? <span>#Hogwarts #HHC #HouseCup</span></div>  
<div class="twPoll twOpt p27"><span class="twBold">27%</span>Slytherin</div>  
<div class="twPoll twOpt p25"><span class="twBold">25%</span>Hufflepuff</div>  
<div class="twPoll twWin p28"><span class="twBold">28%</span>Griffindor</div>  
<div class="twPoll twOpt p20"><span class="twBold">20%</span>Ravenclaw</div>  
<div class="twStats"><!---  
\--->14 votes • Final results<br/><!---  
\--->❤ 2<span class="twTime"> 6:06 AM - Feb 17, 2016</span></div>  
<div class="twComments ">192 people are talking about this</div>  
</div>

And this concludes the tutorial for using Night Mode. I'm not entirely sure what this could be used for aside from aesthetic purposes, but I like Night Mode on my UIs, so maybe you do, too.

**Notes for the Chapter:**

> This is the end of the tutorials as of now. While this fic is marked as complete, if and when I do decide to add new features, I will add additional chapters as well as general FAQ. Feel free to leave comments or questions below, and I will address them as promptly as I can.


	6. HTML Templates

**Notes for the Chapter:**

> These are quick reference templates in one spot. Simple copy paste and fill in what you need. The red bolded sections are the preferences you should be changing.

These are quick reference templates in one spot. Simple copy paste and fill in what you need.

**Simple Twitter Post**

Euphy✔  
@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 1.2M 6:06 PM • August 12, 2017

32.2K people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerified">✔</span><!---  
\---><span class="twHandle">TWITTER HANDLE</span></span><!---  
\---></div>  
<div class="twText">MAIN TEXT <span>#HASHTAG</span></div>  
<div class="twStats"><!---  
\--->❤ LIKES<span class="twTime"> TIME AND DATE</span></div>  
<div class="twComments ">REPLY COUNT people are talking about this</div>  
</div>

**Twitter Post as Reply**

ASHFOOOOORD✔  
@greengablez

replying to  @officialeuphemia

omg she's participating in #hotboysummer with the rest of us!

❤ 5 6:10 PM • August 12, 2017

2 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerified">✔</span><!---  
\---><span class="twHandle">TWITTER HANDLE</span></span><!---  
\---></div>  
<div class="twReply"><span>replying to </span><span>TWITTER HANDLE</span></div>  
<div class="twText">MAIN TEXT <span>#HASHTAG</span></div>  
<div class="twStats"><!---  
\--->❤ LIKES<span class="twTime"> TIME AND DATE</span></div>  
<div class="twComments ">REPLY COUNT people are talking about this</div>  
</div>

**Twitter Post with Picture**

Euphy✔  
@officialeuphemia

Having a nice day out at #LakeKawaguchiHotel with some friends! I really really recommend the food here! It's to die for!

❤ 1.8M 8:25 AM • August 22, 2017

135.7K people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">TWITTER HANDLE</span></span></div>  
<div class="twText">TWITTER TEXT<span>#HASHTAG</span></div>  
<img class="twImage" src="IMAGE URL">  
<div class="twStats"><!---  
\--->❤ LIKES<span class="twTime"> TIME AND DATE</span></div>  
<div class="twComments ">REPLY COUNT people are talking about this</div>  
</div>

**Twitter Quote Retweet**

ASHFOOOOORD✔  
@greengablez

i can't believe we're watching a fairy tale play out for real... man wish that were me

Euphy✔@officialeuphemia

met a really nice guy out in Area 11 and he has a cat named Arthur!! #instantcrush

❤ 45 6:20 PM • August 12, 2017

35 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">TWITTER HANDLE</span></span></div>  
<div class="twText">TEXT HERE</div>  
<div class="twBody twEmbed">  
<div class="twUserEmbed"><!---  
\---><img class="twAvatarEmbed" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerifiedEmbed">✔</span><!---  
\---><span class="twHandleEmbed">TWITTER HANDLE</span></span><!---  
\---></div>  
<div class="twText">TEXT HERE</div>  
</div>  
<div class="twStats"><!---  
\--->❤ LIKES<span class="twTime"> DATE AND TIME</span></div>  
<div class="twComments ">REPLY COUNT people are talking about this</div>  
</div>

**Twitter Quote Retweet with Picture**

shirley's on vacay✔  
@greengablez

i'm like sitting across from you lmao but that looks so good euphy!!

Euphy✔@officialeuphemia

Having a nice day out at #LakeKawaguchiHotel with some friends! I really really recommend the food here! It's to die for!

  


❤ 4.8M 6:20 PM • August 12, 2017

192 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">TWITTER HANDLE</span></span></div>  
<div class="twText">TEXT HERE</div>  
<div class="twBody twEmbed">  
<div class="twUserEmbed"><!---  
\---><img class="twAvatarEmbed" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerifiedEmbed">✔</span><!---  
\---><span class="twHandleEmbed">TWITTER HANDLE</span></span><!---  
\---></div>  
<div class="twText">TEXT HERE</div>  
<img class="twImageEmbed" src="IMAGE URL">  
</div>  
<div class="twStats"><!---  
\--->❤ LIKES<span class="twTime"> DATE AND TIME</span></div>  
<div class="twComments ">REPLY COUNT people are talking about this</div>  
</div>

**Active Twitter Polling**

Lee Jordan✔  
@leejordan

Who won the House Cup in 1991? #Hogwarts #HHC #HouseCup

Slytherin

Hufflepuff

Griffindor

Ravenclaw

14 votes • Final results  
❤ 2 6:06 AM • Feb 17, 2016

192 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">TWITTER HANDLE</span></span></div>  
<div class="twText">TEXT HERE</div>  
<div class="twAPoll">TEXT HERE</div>  
<div class="twAPoll">TEXT HERE</div>  
<div class="twAPoll">TEXT HERE</div>  
<div class="twAPoll">TEXT HERE</div>  
<div class="twStats"><!---  
\--->VOTING STATS HERE<br/><!---  
\--->❤ LIKES<span class="twTime"> DATE AND TIME</span></div>  
<div class="twComments ">REPLY COUNT people are talking about this</div>  
</div>

**Twitter Poll Results**

Lee Jordan✔  
@leejordan

Who won the House Cup in 1991? #Hogwarts #HHC #HouseCup

27%Slytherin

25%Hufflepuff

28%Griffindor

20%Ravenclaw

14 votes • Final results  
❤ 2 6:06 AM • Feb 17, 2016

192 people are talking about this

<div class="tw twBody">  
<div class="twUser"><!---  
\---><img class="twAvatar" src="IMAGE URL"><!---  
\---><span>TWITTER NAME<span class="twVerified">✔</span><br/><!---  
\---><span class="twHandle">TWITTER HANDLE</span></span></div>  
<div class="twPoll twOpt p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twPoll twOpt p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twPoll twWin p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twPoll twOpt p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twStats"><!---  
\--->VOTING STATS HERE<br/><!---  
\--->❤ LIKES<span class="twTime"> DATE AND TIME</span></div>  
<div class="twComments ">REPLY COUNT people are talking about this</div>  
</div>

**Minimalistic Twitter Polling**

7%Absolutely spotless.

84%Can't find my phone?

29%Decked out!

14 votes • Final results

<div class="twSoloPoll">  
<div class="twPoll twOpt p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twPoll twOpt p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twPoll twWin p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twPoll twOpt p100"><span class="twBold">PERCENTAGE</span>TEXT HERE</div>  
<div class="twStats">VOTING STATS HERE</div>  
</div>


	7. CSS Code Dump

**Summary for the Chapter:**

> This is the full CSS Code Dump. The code for each component has been separated by comments for easy reading.

/*The general Tweet container.*/  
.tw {  
max-width: 400px;  
margin-left: auto;  
margin-right: auto;  
padding: 1em;  
}

.tw p {  
margin: 0;  
padding: 0;  
}

.twBody {  
border: .05em solid #ddd;  
border-radius: .3em;  
}

.twEmbed {  
min-width: 90%;  
position: relative;  
padding: 0.5em;  
margin-top: 0.5em;  
margin-bottom: 0.5em;  
overflow: hidden;  
}

/*Avatars are automatically formatted to be circles*/  
.twAvatar {  
width: 40px;  
height: auto;  
float: left;  
margin-right: 0.3em;  
border-radius: 20px;  
}

.twAvatarEmbed {  
width: 20px;  
height: auto;  
float: left;  
margin: 0em 0.3em .3em 0em;  
border-radius: 20px;  
}

/*Formatting for the Verified Icons*/

.twVerified {  
position: relative;  
bottom: 2px;  
display: inline-block;  
font-weight: normal;  
text-align: center;  
font-size: 10px;  
width: 15px;  
height: 15px;  
margin-left: 0.3em;  
background-color: #1DA1F2;  
color: #fff;  
border-radius: 50%;  
}

.twVerifiedEmbed {  
position: relative;  
bottom: 2px;  
display: inline-block;  
font-weight: normal;  
text-align: center;  
font-size: 9px;  
width: 12px;  
height: 12px;  
margin-left: 0.3em;  
background-color: #1DA1F2;  
color: #fff;  
border-radius: 50%;  
}

/* Images */  
.twImage{  
width: 100%;  
height: auto;  
border-radius: 0.3em;  
margin: 0.5em 0em 0.5em 0em;  
}

.twImageEmbed{  
border-radius: 0.3em;  
margin-top: 0.5em;  
}

/* Formatting for Header and Text */  
.twUser {  
font-weight: bold;  
font-size: larger;  
margin-bottom: -0.1em;  
}

.twUserEmbed {  
font-weight: bold;  
font-size: normal;  
margin-bottom: 0.5em;  
}

.twHandle {  
position: relative;  
top: -0.5em;  
font-weight: normal;  
font-size: smaller;  
opacity: 0.6;  
}

.twHandleEmbed {  
position: relative;  
font-weight: normal;  
opacity: 0.6;  
margin-left: 0.3em;  
}

.twText span {  
color: #1DA1F2;  
}

/*Formatting for the span of the like count and timestamp*/  
.twStats {  
width: 100%;  
opacity: 0.6;  
}

.twTime {  
padding: 0em 0em 0em 0.6em;  
}

/*Formatting for Comments*/  
.twComments {  
width: 100%;  
font-weight: 300;  
padding-top: 0.5em;  
margin-top: 0.5em;  
border-top: .05em solid #ddd;  
color: #1DA1F2;  
}

/*Formatting for Reply Tag*/  
.twReply span:first-child {  
opacity: 0.6;  
}

.twReply span:last-child {  
color: #1DA1F2;  
}

/*Formatting for Polling Results*/  
.twPoll p{  
margin: 0;  
padding: 0;  
}

.twPoll {  
padding: .3em 0em .3em 0em;  
margin: .5em 0em .5em 0em;  
border-radius: .3em;  
white-space: nowrap;  
}

/*Formatting for Active Polling*/  
.twAPoll {  
padding: .3em 0em .3em 0em;  
margin: .5em 0em .5em 0em;  
border: 0.08em solid #1DA1F2;  
border-radius: 1em;  
color: #1DA1F2;  
text-align: center;  
}

/*Defines the colors and formats of certain elements*/  
.twWin {background-color: rgba(0, 149, 235, 0.5)} /* Winning option color */  
.twOpt {background-color: rgba(187, 198, 206, 0.5)} /* Other options color */  
/* Night mode */  
.twNM { background-color: #14242C; color: #fff; border-color: #3B5364; }  
.twNM .twBody { border-color: #3B5364 }  
.twNM .twComments { border-top: .05em solid #3B5364}  
.twNM .twWin {background-color: #74cbfb}  
.twNM .twOpt {background-color: #3B5364} /* Other Options Color Night Mode*/  
.twBold {font-weight: bold; padding-right: 10px; padding-left: 10px;} 

/*Percentage Presets*/  
.p0 {width: 0%}  
.p1 {width: 1%}  
.p2 {width: 2%}  
.p3 {width: 3%}  
.p4 {width: 4%}  
.p5 {width: 5%}  
.p6 {width: 6%}  
.p7 {width: 7%}  
.p8 {width: 8%}  
.p9 {width: 9%}  
.p10 {width: 10%}  
.p11 {width: 11%}  
.p12 {width: 12%}  
.p13 {width: 13%}  
.p14 {width: 14%}  
.p15 {width: 15%}  
.p16 {width: 16%}  
.p17 {width: 17%}  
.p18 {width: 18%}  
.p19 {width: 19%}  
.p20 {width: 20%}  
.p21 {width: 21%}  
.p22 {width: 22%}  
.p23 {width: 23%}  
.p24 {width: 24%}  
.p25 {width: 25%}  
.p26 {width: 26%}  
.p27 {width: 27%}  
.p28 {width: 28%}  
.p29 {width: 29%}  
.p30 {width: 30%}  
.p31 {width: 31%}  
.p32 {width: 32%}  
.p33 {width: 33%}  
.p34 {width: 34%}  
.p35 {width: 35%}  
.p36 {width: 36%}  
.p37 {width: 37%}  
.p38 {width: 38%}  
.p39 {width: 39%}  
.p40 {width: 40%}  
.p41 {width: 41%}  
.p42 {width: 42%}  
.p43 {width: 43%}  
.p44 {width: 44%}  
.p45 {width: 45%}  
.p46 {width: 46%}  
.p47 {width: 47%}  
.p48 {width: 48%}  
.p49 {width: 49%}  
.p50 {width: 50%}  
.p51 {width: 51%}  
.p52 {width: 52%}  
.p53 {width: 53%}  
.p54 {width: 54%}  
.p55 {width: 55%}  
.p56 {width: 56%}  
.p57 {width: 57%}  
.p58 {width: 58%}  
.p59 {width: 59%}  
.p60 {width: 60%}  
.p61 {width: 61%}  
.p62 {width: 62%}  
.p63 {width: 63%}  
.p64 {width: 64%}  
.p65 {width: 65%}  
.p66 {width: 66%}  
.p67 {width: 67%}  
.p68 {width: 68%}  
.p69 {width: 69%}  
.p70 {width: 70%}  
.p71 {width: 71%}  
.p72 {width: 72%}  
.p73 {width: 73%}  
.p74 {width: 74%}  
.p75 {width: 75%}  
.p76 {width: 76%}  
.p77 {width: 77%}  
.p78 {width: 78%}  
.p79 {width: 79%}  
.p80 {width: 80%}  
.p81 {width: 81%}  
.p82 {width: 82%}  
.p83 {width: 83%}  
.p84 {width: 84%}  
.p85 {width: 85%}  
.p86 {width: 86%}  
.p87 {width: 87%}  
.p88 {width: 88%}  
.p89 {width: 89%}  
.p90 {width: 90%}  
.p91 {width: 91%}  
.p92 {width: 92%}  
.p93 {width: 93%}  
.p94 {width: 94%}  
.p95 {width: 95%}  
.p96 {width: 96%}  
.p97 {width: 97%}  
.p98 {width: 98%}  
.p99 {width: 99%}  
.p100 {width: 100%}


	8. Tweet Skin Builder: No Coding Required

Not everyone has the time, motivation, or leisure to learn how to code, much less construct a AO3 skin by hand.

That's why I built this user-friendly Tweet skin builder for the Twitter skin I created. It's a single page interface that lets you see your Tweet as you build it. It also generates the HTML you need to display it. No coding required. 

Features:

  * Has all the features documented in this work (images, quote retweets, polls, etc.)
  * Easy to use form that works for both mobile and desktop
  * Generates HTML code into the fics that will work upon pasting



Limitations:

  * You cannot save the tweets you make on the site
  * You must provide your own image URLs for any embedded images and avatars. Please refer to AO3's suggestions on where to host your own images or google it.
  * The code will not be as neatly organized, and there will be extra span tags.



This skin builder is a work in progress, so feedback is always appreciated. Comments and support questions should be submitted in the comment box in this work. For more serious concerns like bugs, please [ submit an issue in this project's github page.](https://github.com/ktddaeng/AO3TweetBuilder/issues) Please read the [contributing guidelines](https://github.com/gadaursan/AO3TweetBuilder/blob/master/CONTRIBUTING.md) first, though.

####  [Link to the AO3 Tweet Builder](https://gadaursan.github.io/AO3TweetBuilder/)


End file.
